
<script setup lang="ts">
import LikeList from '@/components/LikeList.vue';


</script>
<template>
  <div class="bigger">
    <div class="bigbox">
      <div class="header">
        <van-image round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" width="0.3rem" height="0.3rem"
          @click="$router.push('/wode')" />;
        <van-search @click="$router.push('/sousuo')" shape="round" placeholder="搜索商品" background="#ade0e5" />
        <div><van-icon name="bullhorn-o" size="25" color="white" @click="$router.push('/message')" /></div>
      </div>
      <div class="box">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="../../assets/微信图片_20221201085029.jpg" class="img">
          </van-swipe-item>
          <van-swipe-item> <img src="../../assets/微信图片_20211025162605.jpg" class="img"></van-swipe-item>
          <van-swipe-item> <img src="../../assets/微信图片_20211025162629.jpg" class="img"></van-swipe-item>
          <van-swipe-item> <img src="../../assets/yanxu.jpg" class="img"></van-swipe-item>
        </van-swipe>
      </div>

    </div>
    <div class="kind">
      <van-grid :square="true" :gutter="10" :column-num="5">
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />

      </van-grid>
    </div>
    <div class="title">
      <van-tabs :sticky="true" offset-top="60">
        <van-tab title="特惠"></van-tab>
        <van-tab title="全球"></van-tab>
        <van-tab title="运动"></van-tab>
        <van-tab title="日常"></van-tab>
        <van-tab title="精选"></van-tab>
        <van-tab title="科技"></van-tab>
      </van-tabs>
    </div>
    <div class="likeList">
      <LikeList />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.bigger {
  /* height: 5000px; */
  /* background-color:#a5d8ff; */
  width: 100%;

}

.bigbox {
  /* background-color:#a5d8ff; */
  height: 1.8rem;
  width: 100%;
  margin-bottom: 0.7rem;
}

.header {
  background-color: #ade0e5;

  line-height: 0.44rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 0.1rem;


}

.header .van-icon {
  line-height: 0.44rem;
  margin-right: 0.08rem;
}

.header .van-search {
  width: 3rem;
}

.header .van-image {
  line-height: 0.44rem;
  margin-left: 0.08rem;
}

.box {
  position: relative;
  /* width: 100%; */
  margin-bottom: 0.2rem;
}

.box .my-swipe {
  width: 90%;
  height: 1.75rem;
  border-radius: 10px 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.box .my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  /* line-height: 150px */
  text-align: center;
  background-color: #39a9ed;
}

.box .my-swipe .van-swipe-item img {
  width: 100%;
  height: 100%;
}


.bigger .kind {
  /* height: 200px; */
  /* width: 450px; */
  width: 90%;
  background: #dbf6f4;
  border-radius: 10px 10px;
  /* position: fixed; */
  left: 50%;
  transform: translateX(-50%);
  position: relative;

}

.bigger .kind .van-grid {
  padding-top: 15px;
  padding-bottom: 10px;


}

.bigger .tittle {}
</style>